<template>
  <div class="app-container">

    <!-- 库存状态列表视图 -->
    <div v-if="currentView === 'status'">
      <InventoryStatusList
        @view-drugs="handleViewDrugs"
        :query-params="queryParams"
      />
    </div>

    <!-- 货位列表视图 -->
    <div v-if="currentView === 'huowei'">
      <HuoweiList
        @view-drugs="handleViewDrugs"
        :query-params="queryParams"
      />
    </div>

    <!-- 商品列表视图 -->
    <div v-if="currentView === 'drug'">
      <DrugList
        @view-details="handleViewDetails"
        @back-to-huowei="goToHuoweiList"
        :huowei-id="selectedHuoweiId"
        :query-params="queryParams"
      />
    </div>

    <!-- 变更详情视图 -->
    <div v-if="currentView === 'details'">
      <ChangeDetails
        @back-to-drugs="goToDrugList"
        :huowei-id="selectedHuoweiId"
        :drug-id="selectedDrugId"
        :drug-batch-no="selectedDrugBatchNo"
        :query-params="queryParams"
      />
    </div>
  </div>
</template>

<script>
import InventoryStatusList from './components/InventoryStatusList.vue'
import HuoweiList from './components/HuoweiList.vue'
import DrugList from './components/DrugList.vue'
import ChangeDetails from './components/ChangeDetails.vue'

export default {
  name: 'InventoryChange',
  components: {
    InventoryStatusList,
    HuoweiList,
    DrugList,
    ChangeDetails
  },
  data() {
    return {
      // 当前视图：status-库存状态列表, huowei-货位列表, drug-商品列表, details-变更详情
      currentView: 'status',
      // 选中的货位ID
      selectedHuoweiId: '',
      // 选中的药品ID
      selectedDrugId: '',
      // 选中的药品批号
      selectedDrugBatchNo: '',
      // 查询参数
      queryParams: {
        inventoryId: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  methods: {
    // 查看货位下的商品
    handleViewDrugs(huoweiId) {
      this.selectedHuoweiId = huoweiId
      this.currentView = 'drug'
    },

    // 查看商品的变更详情
    handleViewDetails(drugInfo) {
      this.selectedDrugId = drugInfo.drugId
      this.selectedDrugBatchNo = drugInfo.drugBatchNo
      this.currentView = 'details'
    },


    // 返回商品列表
    goToDrugList() {
      this.currentView = 'drug'
      this.selectedDrugId = ''
      this.selectedDrugBatchNo = ''
    }
  }
}
</script>

<style scoped>
.breadcrumb-container {
  margin-bottom: 20px;
}

.breadcrumb-container a {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-container a:hover {
  text-decoration: underline;
}
</style>
